<template>
  <div>
      <el-row v-if="false" class="bg"><h3>2、{{ $t('product.chooseSupplier') }}</h3></el-row>
    <div v-if="false" class="child">
      <!-- 供应商 -->
      <el-row :gutter="30">
        <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.supplier') }}</el-col>
        <el-col :span="20">
          <el-select v-model="supplierValue" :placeholder="$t('product.pleaseChooseSupplier')" @change="handleChooseIssuer">
            <el-option
              v-for="item in supplierList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.productTemplate') }}</el-col>
        <el-col :span="20" style="position: relative">
          <el-select v-model="templateValue" :placeholder="$t('product.pleaseChooseProductTemp')" @change="handleChooseTemp">
            <el-option
              v-for="item in templateListData"
              :key="item.id"
              :label="item.title"
              :value="item.id"
            />
          </el-select>
          <span style="font-size: 12px;color:gray;position:absolute;left: 20px;top: 33px;">{{ $t('product.productTempTips') }}</span>
        </el-col>
      </el-row>
    </div>
    <!-- 商品基本信息 -->
    <el-row v-if="false" class="bg"><h3>3、{{ $t('product.editorProductBaseInfo') }}</h3></el-row>
    <el-row>
      <div class="child">
        <!-- 名称 -->
        <el-row :gutter="30">
          <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.productName') }}</el-col>
          <el-col :span="20">
            <el-input v-model="addProductParams.productName" :placeholder="$t('product.proposalLenght')" />
          </el-col>
        </el-row>
        <!-- 描述 -->
        <el-row :gutter="30">
          <el-col class="title" :span="3">{{ $t('product.shareDesc') }}</el-col>
          <el-col :span="20" style="position:relative">
            <el-input v-model="addProductParams.productShareDesc" style="display:inline-block" />
            <span style="font-size: 12px;color:gray;position:absolute;left: 20px;top: 33px;">{{ $t('product.shareWechart') }}</span>
          </el-col>
        </el-row>
        <!-- 卖点 -->
        <el-row :gutter="30">
          <el-col class="title" :span="3">{{ $t('product.productSelling') }}</el-col>
          <el-col :span="20" style="position:relative">
            <el-input v-model="addProductParams.productSell" />
            <span style="font-size: 12px;color:gray;position:absolute;left: 20px;top: 33px;">{{ $t('product.sellingInfo') }}</span>
          </el-col>
        </el-row>
        <!-- f分组 -->
        <el-row :gutter="30" style="margin-bottom: 30px">
          <el-col class="title" :span="3">{{ $t('product.productGroup') }}</el-col>
          <el-col :span="20">
            <el-select v-model="groupValue" style="width: 80%" multiple clearable :placeholder="$t('product.pleaseChooseProductGroup')" @change="handleSelect">
              <el-option
                v-for="item in groupList"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <span class="groupOprate">
              <span @click="refreshGroupList">刷新</span>
              <span>|</span>
              <span @click="goToGroupList">新建分组</span>
            </span>
          </el-col>
        </el-row>
        <!-- 封面 -->
        <el-row :gutter="30" style="height: 160px">
          <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.coverPic') }}</el-col>
          <el-col :span="20">
            <el-upload
              ref="uploadDom"
              action="#"
              list-type="picture-card"
              :auto-upload="true"
              :file-list="coverPhotoList"
              :http-request="handleUploadHttp"
              :limit="5"
              :on-exceed="handleOverLimit"
            >
              <i slot="default" :loading="coverUploading" class="el-icon-plus" />
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
            <!-- <span style="font-size:12px">建议尺寸：800*800像素，封面图最多上传5张</span> -->
          </el-col>
        </el-row>
        <!-- 商品 -->
        <el-row :gutter="30" style="height: 160px">
          <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.productPic') }}</el-col>
          <el-col :span="20">
            <el-upload
              ref="uploadProductPicDom"
              action="#"
              :file-list="contentPhotoList"
              list-type="picture-card"
              :auto-upload="true"
              :http-request="handleProductUploadHttp"
              :limit="5"
            >
              <i slot="default" class="el-icon-plus" />
              <div slot="file" slot-scope="{file}">
                <img
                  class="el-upload-list__item-thumbnail"
                  :src="file.url"
                  alt=""
                >
                <span class="el-upload-list__item-actions">
                  <span
                    class="el-upload-list__item-preview"
                    @click="handlePictureCardPreview(file)"
                  >
                    <i class="el-icon-zoom-in" />
                  </span>
                  <span
                    v-if="!disabled"
                    class="el-upload-list__item-delete"
                    @click="handleProductPicRemove(file)"
                  >
                    <i class="el-icon-delete" />
                  </span>
                </span>
              </div>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
          </el-col>
        </el-row>
        <el-row :gutter="30">
          <el-col class="title" :span="3">{{ $t('product.productDesc') }}</el-col>
          <el-col :span="20" style="position:relative;">
            <!-- 富文本 -->
            <el-upload
              class="upload-demo"
              action="#"
              :before-upload="handleEditorImg"
              style="position:absolute;right:3%;top:10px"
            >
              <el-button size="small" type="primary">点击上传</el-button>
            </el-upload>
            <!-- <tiny-mce :id="'productDesc'" :value="content" @input="handleEditorContent" /> -->
            <quill-editor ref="myQuillEditor" v-model="content" :options="editorOption" @input="handleEditorContent" />
          </el-col>
        </el-row>
      </div>
    </el-row>
    <!-- 商品价格 -->
    <el-row v-if="false" class="bg"><h3>4、{{ $t('product.productPrice') }}</h3></el-row>
    <div v-if="false" class="child">
      <!-- 商品价格 -->
      <el-row :gutter="30">
        <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.productPrice') }}</el-col>
        <el-col :span="20" class="lineBlock">
          <el-input v-model="addProductParams.productPrice" /> <span class="company">{{ $t('product.element') }}</span>
        </el-col>
      </el-row>
      <!-- 划线价格 -->
      <el-row :gutter="30">
        <el-col class="title" :span="3">{{ $t('product.linePrice') }}</el-col>
        <el-col :span="20" class="lineBlock" style="position:relative">
          <el-input v-model="addProductParams.linePrice" /> <span class="company">{{ $t('product.element') }}</span>
          <span style="font-size:12px;position:absolute;left:20px;top:33px">{{ $t('product.exampleTip') }}：<span style="text-decoration: line-through">￥200</span></span>
        </el-col>
      </el-row>
      <!-- 折扣价格 -->
      <el-row>
        <el-col :offset="1">
          <el-checkbox v-model="discountTrue" @change="chooseDiscount">{{ $t('product.ifJoinDiscount') }}<span style="font-size: 12px;margin-left:10px">{{ $t('product.discountTip') }}</span></el-checkbox>
        </el-col>
      </el-row>
      <el-row v-if="discountTrue" :gutter="30">
        <el-col class="title" :span="3"><span class="beRequired">*</span>{{ $t('product.discountPrice') }}</el-col>
        <el-col :span="20" class="lineBlock">
          <el-input v-model="addProductParams.discountPrice" /> <span class="company">{{ $t('product.element') }}</span>
        </el-col>
      </el-row>
      <!-- <div style="padding-left:15px;margin-top:15px">
        <el-checkbox v-model="taxrateTrue" @change="chooseTaxrate">{{ $t('product.ifHaveTaxRate') }}</el-checkbox>
      </div>
      <el-row v-if="taxrateTrue" :gutter="30">
        <el-col class="title" :span="2">{{ $t('product.taxRate') }}</el-col>
        <el-col :span="20" class="lineBlock">
          <el-input v-model="addProductParams.taxRate" /><span class="company">%</span>
        </el-col>
      </el-row> -->
      <el-row :gutter="30">
        <el-col class="title" :span="3">{{ $t('product.sendTemplate') }}</el-col>
        <el-col :span="20" class="lineBlock">
          <el-input v-model="addProductParams.sendTemplate" :placeholder="$t('product.unifiedFreight')" /> <span class="company">{{ $t('product.element') }}</span>
        </el-col>
      </el-row>
    </div>
    <el-row v-if="false" class="child" style="margin-top:30px" :gutter="30">
      <el-col class="title" :span="3">
        <div style="width:150px;height: 50px" />
      </el-col>
      <el-col :span="20">
        <el-button v-loading="saveLoading" type="primary" plain @click="handleConfirmDraft">{{ $t('product.saveStrftDraft') }}</el-button>
        <el-button v-if="productStatus!=='SALED'" v-loading="upLoading" type="primary" style="margin-left:30px" @click="handleConfirmUpShelves">{{ $t('product.productUp') }}</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>
